<template>
  <div style="background-image: url('https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/infocenterbg.a1a0d152.jpg');
height: 80vh">

    <div class="main">
      <div>
        <el-row type="flex" style="padding: 0.5rem;background: linear-gradient(to right, #ffd5d5, #c9fff8, #fff7d5)">
          <el-col :span="2" @mouseenter.native="changeAvaterVis=true" @mouseleave.native="changeAvaterVis=false">
            <el-avatar :size="80" :src="userinfo.imgUrl"/>
            <el-upload v-if="changeAvaterVis" style="position: absolute;left: 0;bottom: 0"
                       :action="urlImg"
                       name="file"
                       :on-success="handleuploadImg"
                       :headers="headers">
              <el-button style=";background-color: rgba(0,0,0,0.4)" slot="trigger">
                更换头像
              </el-button>
            </el-upload>
          </el-col>
          <el-col :span="3">
            <div style="padding-top: 2rem">
              <el-input v-if="changeNameVis" @blur="handleChangeName" ref="changeName" v-model="newName"/>
              <span v-else @mouseenter="changeName" style="max-height: 20px;color: #00c2ff">{{userinfo.name}}</span>
              <p style="margin: 0;font-size: 8px">Id:{{userinfo.account}}</p>
            </div>
          </el-col>
          <el-col :offset="16">
            <el-button round style="padding: 10px" type="info" @click="updateVis=true">修改密码</el-button>
            <p>已绑定手机:1878888888</p>
          </el-col>
        </el-row>
      </div>
    <el-divider/>
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="row2">
            <el-menu mode="horizontal" :router="true">
              <el-menu-item index="/index/mine/delivery">
                <i class="el-icon-s-promotion" style="color: #77e877"></i>
                <p style="font-size: 18px;display: inline">我的投递</p>
              </el-menu-item>
              <el-menu-item index="/index/mine/chart">
                <i class="el-icon-chat-line-round" style="color: #ff8ed0"/>
                <p style="font-size: 18px;display: inline">沟通过</p>
              </el-menu-item>
              <el-menu-item index="/index/mine/feedback">
                <i class="el-icon-s-opportunity" style="color: #ff8b00"/>
                <p style="font-size: 18px;display: inline">企业反馈</p>
              </el-menu-item>
              <el-menu-item index="/index/mine/interview">
                <i class="el-icon-s-opportunity" style="color: #ff8b00"/>
                <p style="font-size: 18px;display: inline">我的面试</p>
              </el-menu-item>
            </el-menu>
            <div style="height: 300px;overflow-y: auto">
              <router-view/>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="row2">
            <div>我的简历</div>
            <el-divider/>
            <el-button type="text" v-if="userinfo.biographicalNotesUrl" @click="dialogVis=true"><i class="el-icon-folder"/>{{biographicalNotesName}}</el-button>
            <p v-else>你还未上传简历</p>
            <el-upload :auto-upload="false"
                       :action="url"
                       name="file"
                       ref="upload"
                       :on-success="handleupload"
                       :headers="headers"
            >
              <el-button type="primary" slot="trigger">更新简历</el-button>
              <el-button @click="upload()">提交</el-button>
              <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
            </el-upload>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
    :visible.sync="dialogVis"
    >
      <pdf :src="userinfo.biographicalNotesUrl"/>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import user_js, {getuserinfo} from "@/utils/api/user"
export default {
  name: "Mine",
  components:{
    pdf
  },
  data(){
    return{
      //提交地址
      url:'',
      urlImg:'',
      headers:{
        token:localStorage.getItem('token')
      },

      userinfo:{},
      dialogVis:false,
      updateVis:false,
      //更换头像
      changeAvaterVis:false,
      // 更换昵称
      changeNameVis:false,
      newName:''
    }
  },
  computed:{
    biographicalNotesName(){
      var str=this.userinfo.biographicalNotesUrl
      return str.substring(str.indexOf('=')+1,str.length)
    }
  },
  mounted() {
    this.url=this.global.url+'/upload'
    this.urlImg=this.global.url+'/uploadImg'
    this.getuser()
  },
  methods:{
     getuser() {

       getuserinfo().then((res)=>{
        this.userinfo=res.data
      })
    },
    upload(){
      this.$refs.upload.submit()
    },
    handleupload(res){
      if(res.msg){
        this.$message.error(res.msg)
      }
      else {
        this.userinfo.biographicalNotesUrl=res.data
        this.$message.success("上传成功")
      }
      this.$refs.upload.clearFiles()
    },
    handleuploadImg(res){
        this.userinfo.imgUrl=res.data
        this.$message.success("上传成功")
    },
    handleChangeName(){
      this.changeNameVis=false
      if(this.userinfo.name==this.newName)return
      this.userinfo.name=this.newName
      const user={
        id:localStorage.getItem("userid"),
        name:this.newName
      }
      user_js.changeName(user)
      this.$message.success("修改成功")
    },
    changeName(){
      this.changeNameVis=true
      //获得焦点
      this.$nextTick(_ => {
        this.$refs.changeName.$refs.input.focus();
      });
      this.newName=this.userinfo.name
    }
  },
}
</script>

<style scoped>
.main{
  background-color: rgba(253, 255, 255, 0.7);
}
.row2{
  background-color: white;
  border-radius: 5px;
}
</style>